<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="系统任务">
				<view slot="center" class="navTitle">
					系统任务
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									进行中
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已完成
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30"
				@scrolltolower="loadMore">
				<view class="pd30">
					<view class="workList">
						<view class="workBox" v-for="(k,kindex) in list" :key="kindex">
							<view class="date">
								{{k.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
							</view>
							<view class="wkitem" v-for="(l,lindex) in k.list" :key="lindex">
								<view class="tit"  :class="{'pink':!l.isComplete,'s2':lindex==0}">
									<view class="titin">
										<view class="tl">
											<view class="or">{{(lindex+1)}}</view>
											<view class="t">
												{{l.title}}
											</view>
										</view>
										<view class="tr">
											<view v-if="l.tips">
												<navigator url="/subpage/appointment/list" open-type="navigate" class="btn navigator">
													去预约
												</navigator>
											</view>
											<text v-else>
												{{l.isComplete?'已完成':'未完成'}}
											</text>
										</view>
									</view>
								</view>
								<template v-for="(m,mindex) in l.list">
									<view class="rpt">
										<template v-if="m.messageType==0">
											<view class="subt" :class="m.isComplete?'':'s2'" v-if="m.subtitle">
												<view class="dot"></view>
												<view class="tc block border">
													<view class="ct">
														<view class="t">{{m.title}}</view>
													</view>
													<view class="cb">
														<view class="cl">
															{{m.subtitle}}
														</view>
														<view class="tr">
															<view class="btn" @tap="viewzjDetail(m.id)">
																查看
															</view>
														</view>
													</view>
												</view>
											</view>
											<view class="subt" :class="m.isComplete?'':'s2'" v-else>
												<view class="dot"></view>
												<view class="tc border">
													<view class="t">{{m.title}}</view>
													<view class="tr">
														<view class="btn" @tap="viewzjDetail(m.id)">
															查看
														</view>
													</view>
												</view>
											</view>
										</template>
										<view class="subt" :class="m.isComplete?'':'s2'" v-else>
											<view class="dot"></view>
											<view class="tc">
												<view class="t">{{m.title}}</view>
												<view class="tr">
													<view v-if="m.messageType==1&&!m.isComplete">
														<view class="btn on" @tap="viewSingleDetail(m.id)">
															去完成
														</view>
													</view>
													<view v-if="m.messageType==2">
														<view class="addBtn" @tap="addDailyForm(m.id)">
															<view class="ico">
																<image src="@/static/images/icon-add.svg" mode="aspectFit"></image>
															</view>
															<text>添加</text>
														</view>
													</view>
													<view v-if="m.messageType==3">
														<view class="addBtn" @tap="addStudentCommunicate(m.id)">
															<view class="ico">
																<image src="@/static/images/icon-add.svg" mode="aspectFit"></image>
															</view>
															<text>添加</text>
														</view>
													</view>
													<view v-if="m.messageType==4">
														<view class="addBtn" @tap="addParentCommunicate(m.id)">
															<view class="ico">
																<image src="@/static/images/icon-add.svg" mode="aspectFit"></image>
															</view>
															<text>添加</text>
														</view>
													</view>
													<view v-if="m.messageType==5">
														<view class="btn" @tap="viewtzDetail(m.id)">
															查看
														</view>
													</view>
													<view v-if="m.messageType==7">
														{{m.notice||''}}
													</view>
												</view>
											</view>
										</view>
										<view class="ul" v-if="m.messageType==2">
											<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
												<view class="idate">
													{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
												</view>
												<view class="it">
													{{n.title}}
												</view>
												<view class="ir">
													<view class="btn" @tap="viewStudentCommunicate(n.id)">
														查看
													</view>
												</view>
											</view>
										</view>
										<view class="ul" v-if="m.messageType==3">
											<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
												<view class="idate">
													{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
												</view>
												<view class="it">
													{{n.title}}
												</view>
												<view class="ir">
													<view class="btn" @tap="viewDailyDetail(n.id)">
														查看
													</view>
												</view>
											</view>
										</view>
										<view class="ul" v-if="m.messageType==4">
											<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
												<view class="idate">
													{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
												</view>
												<view class="it">
													{{n.title}}
												</view>
												<view class="ir">
													<view class="btn" @tap="viewParentCommunicate(n.id)">
														查看
													</view>
												</view>
											</view>
										</view>
										<view class="ul" v-if="m.messageType==6">
											<view class="li">
												<view class="idate">
													会诊时间
												</view>
												<view class="ir">
													{{m.consultation.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
												</view>
											</view>
											<view class="li">
												<view class="idate">
													会诊地点
												</view>
												<view class="ir">
													{{m.consultation.location}}
												</view>
											</view>
										</view>
									</view>
								</template>
								<view class="wtips" v-if="l.tips">
									<rich-text :nodes="l.tips"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx"
						:status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
		<u-action-sheet @close="showActionSheet=false" :closeOnClickOverlay="true" round="30rpx"
			:actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop: 0,
				scrollTop: 0,
				type: 0,
				list: [],
				pageSize: 10,
				total: 1,
				pageIndex: 1,
				isLoading: false
			}
		},
		methods: {
			addDailyForm(id) { //添加日常观察记录
				uni.navigateTo({
					url: '/subpage/teacher/DailyObservation/DailyObservation?id=' + id
				});
			},
			viewDailyDetail(id) { //查看日常观察记录
				uni.navigateTo({
					url: '/subpage/teacher/DailyObservation/detail?id=' + id
				});
			},
			addStudentCommunicate(id) { //添加学生访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/studentCommunicate/studentCommunicate?id=' + id
				});
			},
			viewStudentCommunicate(id) { //查看学生访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/studentCommunicate/detail?id=' + id
				});
			},
			addParentCommunicate(id) { //添加家长访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/homeVisits/homeVisits?id=' + id
				});
			},
			viewParentCommunicate(id) { //查看家长访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/homeVisits/detail?id=' + id
				});
			},
			viewSingleDetail(id){ //单篇详情
				uni.navigateTo({
					url:'/subpage/single/single?id='+id
				})
			},
			viewtzDetail(id) { //通知详情
				uni.navigateTo({
					url: '/subpage/notice/notice?id=' + id
				})
			},
			viewzjDetail(id) { //查看转介信
				uni.navigateTo({
					url: '/subpage/teacher/letter/letter?id=' + id
				});
			},
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			toggleType(type) {
				var that = this;
				that.type = type;
				that.list = [];
				that.pageIndex = 1;
				that.scrollTop = that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList() {
				var that = this;
				if (that.isLoading) {
					return;
				};
				that.isLoading = true;
				let timer = setTimeout(function() {
						//请求开始
						//messageType:列表消息类型：0转介信，1课程，2日常访谈记录表，3行为观察表，4家访记录表,5通知，6会诊，7消息
						//workType:0心理辅导，1通知，2课程,3转介信
						//status,:0进行中，1已完成
						var res = {
							list: [{
									date: '2024-9-26 12:30',
									list: [{
										workType: 0,
										isComplete: true,
										date: '2024-9-18 11:50',
										title: '心理辅导',
										list: [{
												isComplete: true,
												messageType: 2,
												title: '日常访谈记录表',
												children: [{
														id: 101,
														title: '访谈记录表',
														date: '2024-9-19 16:50'
													},
													{
														id: 101,
														title: '访谈记录表',
														date: '2024-9-19 16:50'
													}
												]
											},
											{
												isComplete: true,
												messageType: 3,
												title: '行为观察表',
												children: [{
														id: 101,
														title: '行为观察表',
														date: '2024-9-19 16:50'
													},
													{
														id: 101,
														title: '行为观察表',
														date: '2024-9-19 16:50'
													}
												]
											},
											{
												isComplete: false,
												messageType: 4,
												title: '家访记录表',
												children: [{
													id: 101,
													title: '家访记录表',
													date: '2024-9-19 16:50'
												}]
											}
										]
									}]
								},
								{
									date: '2024-9-26 12:30',
									list: [{
											isComplete: true,
											workType: 1,
											date: '2024-9-18 11:50',
											title: '即时监护，防暴力攻击',
											list: [{
													id: 101,
													title: '《安全告知书》',
													messageType: 5,
													isComplete: true
												},
												{
													id: 101,
													title: '学校通知',
													messageType: 5,
													isComplete: true
												}
											]
										}
									]
								},
								{
									date: '2024-9-26 12:30',
									list: [{
											isComplete: true,
											workType: 1,
											date: '2024-9-18 11:50',
											title: '即时监护，防自杀、自伤',
											list: [{
													id: 101,
													title: '《安全告知书》',
													messageType: 5,
													isComplete: true
												},
												{
													id: 101,
													title: '学校通知',
													messageType: 5,
													isComplete: true
												}
											]
										}
									]
								},
								{
									date: '2024-9-26 12:30',
									list: [{
											workType: 1,
											isComplete: false,
											date: '2024-9-18 11:50',
											title: '心理健康教育课程/视频',
											list: [{
													id: 101,
													title: '心理百科|解锁“空船效应”，拥抱平和心境',
													messageType: 1,
													isComplete: false
												},
												{
													id: 101,
													title: '比抑郁症更危险的疾病双相情感障碍你知道多少',
													messageType: 1,
													isComplete: false
												},
												{
													id: 101,
													title: '明明是好事，为什么会有人会觉得“我不配”?',
													messageType: 1,
													isComplete: false
												},
												{
													id: 101,
													title: '明明是好事，为什么会有人会觉得“我不配”?',
													messageType: 1,
													isComplete: true
												}
											]
										},
										{
											workType: 2,
											isComplete: true,
											date: '2024-9-18 11:50',
											title: '心理辅导',
											list: [],
											tips: `家长你好，生活中的烦恼和困惑，会让我们感到迷茫和无助。学校心理健康教育专职教师时刻准备着倾听你的心声，为你提供专业的指导和支持。欢迎你随时预约咨询。`
										}
									]
								},
								{
									date: '2024-9-26 12:30',
									stage: 2,
									list: [{
											isComplete: true,
											workType: 1,
											date: '2024-9-18 11:50',
											title: '校内会诊',
											list: [{
													id: 101,
													title: '学校通知',
													messageType: 5,
													isComplete: true
												}
											]
										},
									]
								},
								{
									date: '2024-9-26 12:30',
									stage: 4,
									list: [
										{
											workType: 1,
											isComplete: true,
											date: '2024-9-18 11:50',
											title: '即时转介',
											list: [
												{
													id: 101,
													title: '学校转介信 ',
													messageType: 0,
													subtitle: '',
													isComplete: true
												}
											]
										}
									]
								}
							],
							total: 6
						};
						var arr = that.list.concat(res.list);
						that.list = arr;
						that.total = res.total;
						that.isLoading =
							false;
						//end
						clearTimeout(timer);
					},
					30);
			},
			loadMore() {
				var that = this;
				if (that.list.length < that.total && !that.isLoading) {
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed: {

		},
		mounted() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.workItem {
		margin-bottom: 30rpx;
		padding-bottom: 50rpx;
		border-bottom: 1rpx solid #f8f6f4;

		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
			border: none;
		}
	}

	.ihd {
		padding: 30rpx;
		border-radius: 30rpx;
		background: #fff;
		margin-bottom: 20rpx;

		.date {
			line-height: 1;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f8f6f4;
			color: #65554d;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}

		.bx {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bxt {
				flex: 1 1 auto;
				padding-right: 30rpx;
				font-size: 32rpx;
				color: #65554d;
			}

			.bxr {
				flex: 0 0 auto;

				.tag {
					padding: 0 12rpx;
					line-height: 40rpx;
					border-radius: 6rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.wtit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.tl {
			flex: 1 1 auto;
			overflow: hidden;
			font-size: 32rpx;
			color: #65554d;
		}

		.tr {
			flex: 0 0 auto;

			.btn {
				padding: 0 12rpx;
				line-height: 40rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				background: #df7f83;
				color: #fff;
			}
		}
	}

	.rwdx {
		padding: 26rpx 30rpx;
		text-align: center;
		margin: -13rpx -40rpx 30rpx;
		background: #ffebf2;
		color: #df6982;
		font-size: 24rpx;
		position: relative;

		&:after {
			content: "";
			position: absolute;
			right: 90rpx;
			bottom: 100%;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 6rpx solid #ffebf2;
		}
	}

	.workBox {
		.tit {
			padding: 15rpx 0;
			background: none;
			display: block;

			.titin {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx 30rpx 0;
				background: linear-gradient(90deg, #fff, #dbf3e5);
				border-radius: 0 20rpx 20rpx 0;

			}

			&.pink {
				.titin {
					background: linear-gradient(90deg, #fff, #ffdeea);
				}
			}

			&:before {
				content: "";
				position: absolute;
				left: 14rpx;
				width: 4rpx;
				bottom: calc(50% + 10rpx);
				top: 0;
				background: #e8e8e8;
				z-index: 1;
			}

			&:after {
				content: "";
				position: absolute;
				left: 14rpx;
				width: 4rpx;
				top: calc(50% + 10rpx);
				bottom: 0;
				background: #e8e8e8;
				z-index: 1;
			}

			&.s2 {
				&:before {
					display: none;
				}

				&:after {
					display: block;
				}
			}
		}
	}
</style>